<template>
	<div  class='main'> 
		 <ul  class='contact_bg  clear'>
		 	<li><label>{{AllData.tel.title}}</label>0571-89996201</li>
		 	<li><label>{{AllData.contact_person.title}}</label> {{AllData.contact_person.content}}</li>
		 </ul>
		 <div class='bg-white pd30 mt32'>
		 	<span>{{AllData.tip}}</span>
		 	 <a-form :layout="formLayout"  :form="form"   @submit="handleSubmit" class='mt20'> 
			    <a-form-item
			        :label="AllData.form.name"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           <a-input  v-decorator="['name',baseform.name]"  />
			    </a-form-item> 
			     <a-form-item
			        :label="AllData.form.companyName"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           <a-input  v-decorator="['companyName',baseform.companyName]"  />
			    </a-form-item>
			     <a-form-item
			        :label="AllData.form.email"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           <a-input  v-decorator="['email']"  />
			    </a-form-item> 
			     <a-form-item
			        :label="AllData.form.tel"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           <a-input  v-decorator="['phone',baseform.phone]"  />
			    </a-form-item> 
			     <a-form-item
			        :label="AllData.form.message"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           <a-textarea  v-decorator="['message',baseform.message]"  rows='5'/>
			    </a-form-item>  
			    <a-form-item
			        :label="AllData.form.file"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >  
			      	<fileUpload   :fileList='fileData' :btnTip='AllData.upload' v-on:uploading='($event)=>{fileData = $event.fileList}'  v-on:removeFile='removeFile_fromList($event,fileData)'  ></fileUpload>
			    </a-form-item>
				<a-form-item
					:wrapper-col="buttonItemLayout.wrapperCol"
				>
					<a-button   html-type="submit"   :class='{"w-100":Global.currentDevice}' >
						{{AllData.form.btn}}
					</a-button> 
				</a-form-item>
			</a-form>
		 </div>
	</div>
</template>

<script >
	import { submitCustomerForm }  from '@/api/common'
import  fileUpload  from  '@/components/fileUpload'
export default {
	name:'contact_form',
	props:{
		language:Object
	},
	data(){
		return {
			/*form  布局*/
      		formLayout:'horizontal',
      		baseform:{
      			name:{ rules:[{ required:true,message:'请输入必填项' }] },
      			companyName:{ rules:[{ required:true,message:'请输入必填项' }] },

      			phone:{ rules:[{ required:true,message:'请输入必填项' }] },
      			message:{ rules:[{ required:true,message:'请输入必填项' }] },
      		},
      		fileData:[],
		}	
	},
	beforeCreate () {
		this.form = this.$form.createForm(this);
	},
	methods:{
		handleSubmit(e){
			e.preventDefault();
		      this.form.validateFields((err, values) => {
		        if (!err) {
		          console.log('Received values of form: ', values);
		          values.fileVOList = this.ReFileCodeToSub(this.fileData) 
		          
		          submitCustomerForm(values).then((res)=>{
		          	if(res.data.flag == true){
		          		this.$message.success('您的信息已成功提交，请耐心等待！')
		          		this.form.resetFields()
		          		this.fileData = []
		          	}
		          })
		        }
		      });
		}
	},
	computed: {
		formItemLayout () {
			const { formLayout } = this;
			return formLayout === 'horizontal' ? {
			labelCol: {md:{span:5},lg:{ span: 7 }},  //label 标签布局
			wrapperCol: {xxl:{ span: 8 },xl:{ span : 11},lg:{ span :14 },md:{ span : 16 },xs:{ span :24}}, //需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
			} : {};
		},
		buttonItemLayout () {
			const { formLayout } = this;
			return formLayout === 'horizontal' ? {
			wrapperCol: { xs : { span : 24 } , sm : { span : 14 , offset: 7} },
			} : {};
		},
		AllData(){
			return this.language.contact_form
		}
	},
	components:{
		fileUpload
	}
}
</script>

<style  scoped="scoped">  
.main{width: 1200px; margin:0 auto;padding:30px 0 50px;} 
.contact_bg{background: url(../assets/img/contact_form_bg.png) no-repeat center;height: 100px;line-height: 100px; text-align: center;}
.contact_bg li{width: 50%;float: left;}
.contact_bg li label{font-size: 18px;font-weight: 600;color: #2E4E7E;padding-right: 20px;}

/*移动端适配*/
@media(max-width: 420px){   
	.main{width: 100%;padding: 20px ;}  
	.contact_bg{line-height: 30px;padding: 20px 0} 
	.contact_bg li{width: 100%;}
	.contact_bg li label{font-size: 16px;}
}
</style>